<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Remote file for Bootstrap Modal</title>  
  <style>
      div#cntnt {
width:1080px;
margin:0 auto;
	height: 100%;
	}

#first {
	position:relative;
	width:250px;
	height:115px;
	float:left;
	}
#second {
position:relative;
	width:250px;
	height:115px;
	float:left;
	}
#third {
position:relative;
	width:250px;
	height:115px;
	float:left;
	}
#last {
position:relative;
	width:250px;
	height:115px;
	float:left;
	}
#cntnt img {
  position:absolute;
  left:0;
  top:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cntnt img.top:hover {
  opacity:0;
}
      
  </style>
</head>
<body>
 <div id="cntnt">
<div class="column" id="first">
<img class="bottom" alt="" src="http://test.neurostar.de/images/robothover.jpg">
<a href="http://test.neurostar.de/motorized-stereotaxic-instrument/"><img class="top" alt="" src="http://test.neurostar.de/images/robot.jpg"></a>
</div>

<div class="column" id="second">
<img class="bottom" alt="" src="http://test.neurostar.de/images/ephyshover.jpg">
<a href="http://test.neurostar.de/electrophysiology/"><img class="top" alt="" src="http://test.neurostar.de/images/ephys.jpg"></a>
</div>

<div class="column" id="third">
<img class="bottom" alt="" src="http://test.neurostar.de/images/dbshover.jpg">
<a href="http://test.neurostar.de/deep-brain-stimulation-dbs/"><img class="top" alt="" src="http://test.neurostar.de/images/dbs.jpg"></a>
</div>

<div class="column" id="last">
<img class="bottom" alt="" src="http://test.neurostar.de/images/planninghover.jpg">
<a href="http://test.neurostar.de/deep-brain-stimulation-dbs/"><img class="top" alt="" src="http://test.neurostar.de/images/planning.jpg"></a>
</div>
</div>
</body>
</html>